<template>
  <div class="give-role">
    <div class="give-role-container">
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in grandList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
      </el-checkbox-group>

      <div class="give-role-btn">
        <el-button size="medium" type="warning" plain @click="$emit('close')">取消</el-button>
        <el-button size="medium" type="primary" plain @click="onSubmit">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllUserRoleRequest, userInfoDetailRequest } from '@/api/user'
import { giveAssignPermissionRequest } from '@/api/employees'
export default {
  name: 'GiveRoleDialog',
  props: {
    // 接收父组件传递的id
    currentId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 存放被选中的数据的数组
      checkList: [],
      // 包含所有权限点的数据数组
      grandList: []
    }
  },
  created() {
    this.getAllUserRole()
  },
  methods: {
    // ^ ===================  请求 ====================
    // 请求 - 获取所有角色列表
    async getAllUserRole() {
      try {
        // 获取所有角色列表
        const res = await getAllUserRoleRequest()
        if (res.success) {
          // console.log(res.data.rows)
          this.grandList = res.data.rows
        } else {
          this.$message.error(res.message || '获取所有角色列表失败')
        }
        // 根据 ID 获取角色详情 - 数据回显
        const res2 = await userInfoDetailRequest(this.currentId)
        if (res2.success) {
          // console.log(res2.data.roleIds)
          this.checkList = res2.data.roleIds || [] // 将获取到的员工的当前角色信息赋给被包含所有选中状态数据的数组
        } else {
          this.$message.error(res2.message || '获取角色详情世失败')
        }
      } catch (error) {
        console.log('获取所有角色列表失败', error)
      }
    },
    // 请求 - 给员工分配角色
    async giveAssignPermission() {
      try {
        const res = await giveAssignPermissionRequest({
          id: this.currentId,
          roleIds: this.checkList
        })
        if (res.success) {
          this.$message.success('分配角色成功!')
          this.$emit('close') // 关闭模态框
        } else {
          this.$message.error(res.message || '分配角色失败!')
        }
      } catch (error) {
        console.log('分配角色失败!', error)
      }
    },

    // ^ ===================  事件 ====================
    // 事件 - 提交按钮
    onSubmit() {
      this.giveAssignPermission() // 给员工分配角色
    }
  }
}
</script>

<style lang="scss" scoped>
.give-role-btn {
  margin-top: 25px;
  text-align: right;
}
</style>
